import './index.less'
import {useEffect,useState} from 'react'
import {useDispatch,useSelector,QuestionModelState, Effect} from 'umi';
import { Button, Radio,Table, Modal, Input,Form} from 'antd';
import {insert_QuestionsType,del_QuestionsType,questions,questionsCondition,questionsUpdate} from '@/utils/interface';

const questionsType:React.FC=()=>{
  let [insertType,setInsertType]=useState('') 
  const dispatch=useDispatch();
    // 弹框显示隐藏
    const [isBounced, setIsBounced] = useState(false);
    const  bounced=()=>{
        setIsBounced(true)
    }
    const handleOk = () => {
        console.log(insertType,questionsType.length);
        let payload:insert_QuestionsType={text:insertType,sort:questionsType.length+1+''}
        dispatch({
          type:'question/getInsertQuestionsType',
          payload
        })
        dispatch({
          type:'question/getGetQuestionsType'
        })
        setIsBounced(false);
      };
      const handleCancel = () => {
        setIsBounced(false);
      };
      const columns = [
        {
          title: '类型ID',
          dataIndex: 'questions_type_id',
          key: 'questions_type_id',
        //   render: text => <a>{text}</a>,
        },
        {
          title: '类型名称',
          dataIndex: 'questions_type_text',
          key: 'questions_type_text',
        },
        {
          title: '操作',
          dataIndex: '',
          key: 'questions_type_sort',
        }
    ];
    useEffect(() => {
      dispatch({
        type:'question/getGetQuestionsType'
      })
    }, [])
    let {questionsType}=useSelector((model:{question:QuestionModelState})=>model.question)
    console.log(questionsType);
    let data=questionsType.map((item,index)=>{
      return {...item,key:index}
    })

    return ( <div className="questionsType">
        <h2>试题分类</h2>
        <div className="questionsType_connten">
        <Button type="primary" onClick={bounced}>
              + 添加类型
        </Button>
          
        <Table columns={columns} dataSource={data} />
        {/* 弹框 */}
        <Modal
              visible={isBounced}
              onCancel={handleCancel}
              onOk={handleOk}
              okText="确定"
              cancelText="取消"
            >
              <div>
                  <h2>创建新类型</h2>
                    <Input placeholder="请输入类型名称"  bordered={false} value={insertType} onChange={(e)=>{setInsertType(e.target.value)}}/>
              </div>
            </Modal>
        </div>
    </div> )
}
export default  questionsType